<template>
  <div class="work-address-tree">

    <!--省级-->
    <div class="address-tree-nav">
      <div class="address-tree-ellipsis"
           :class="{'nav-active':navId == index,'nav-second-active':(showData == 2 && navId == index)}"
           v-for="(item,index) in itemList"
           :key="index"
           @click="selectTree(index,item.name,item.city)">
        <span class="province-item">{{item.name}}</span>
      </div>
    </div>

    <!--地级市-->
    <div class="address-tree-content-city" v-show="showData != 2">
      <div class="address-tree-ellipsis-content" :class="{'city-active':cityId == index}"
           v-for="(item,index) in cityList"
           :key="index"
           @click="selectCity(index,item.area,item.name)">
        <span class="city-item">{{item.name}}</span>
      </div>
    </div>

    <!--县城-->
    <div class="address-tree-content-town" :class="{'town-con':showData == 2}">
      <div class="address-tree-ellipsis-content" v-for="(item,index) in townList" :key="index"
           @click="selectTown(item)">
        <span class="town-item">{{item}}</span>
      </div>
    </div>

  </div>
</template>

<script>
  import treeList from "../../../../static/province-tree"

  export default {
    data() {
      return {
        itemList: treeList,
        navId: 0,//被选中一级
        cityId: 0,//被选中二级
        cityList: [],
        townList: [],
        showData: 0,
        cityName: "",
        userId: this.$route.query.userId,
        inviteType: this.$route.query.inviteType,
        affiliationId: this.$route.query.affiliationId
      }
    },
    created() {
      let initList = [
        {
          "id": 441900,
          "name": "东莞市",
          "area": [
            "全市",
            "莞城区",
            "南城区",
            "万江区",
            "石碣镇",
            "石龙镇",
            "茶山镇",
            "石排镇",
            "企石镇",
            "横沥镇",
            "桥头镇",
            "谢岗镇",
            "东坑镇",
            "常平镇",
            "寮步镇",
            "大朗镇",
            "麻涌镇",
            "中堂镇",
            "高埗镇",
            "樟木头镇",
            "大岭山镇",
            "望牛墩镇",
            "黄江镇",
            "洪梅镇",
            "清溪镇",
            "沙田镇",
            "道滘镇",
            "塘厦镇",
            "虎门镇",
            "厚街镇",
            "凤岗镇",
            "长安镇"
          ],
          "city": null
        },
        {
          "id": 110100,
          "name": "北京市",
          "area": [
            "全市",
            "东城区",
            "西城区",
            "朝阳区",
            "丰台区",
            "石景山区",
            "海淀区",
            "门头沟区",
            "房山区",
            "通州区",
            "顺义区",
            "昌平区",
            "大兴区",
            "怀柔区",
            "平谷区",
            "密云县",
            "延庆县"
          ],
          "city": null
        },
        {
          "id": 310100,
          "name": "上海市",
          "area": [
            "全市",
            "黄浦区",
            "徐汇区",
            "长宁区",
            "静安区",
            "普陀区",
            "闸北区",
            "虹口区",
            "杨浦区",
            "闵行区",
            "宝山区",
            "嘉定区",
            "浦东新区",
            "金山区",
            "松江区",
            "青浦区",
            "奉贤区",
            "崇明县"
          ],
          "city": null
        },
        {
          "id": 440100,
          "name": "广州市",
          "area": [
            "全市",
            "荔湾区",
            "越秀区",
            "海珠区",
            "天河区",
            "白云区",
            "黄埔区",
            "番禺区",
            "花都区",
            "南沙区",
            "从化区",
            "增城区"
          ],
          "city": null
        },
        {
          "id": 440300,
          "name": "深圳市",
          "area": [
            "全市",
            "罗湖区",
            "福田区",
            "南山区",
            "宝安区",
            "龙岗区",
            "盐田区",
            "光明新区",
            "坪山新区",
            "大鹏新区",
            "龙华新区"
          ],
          "city": null
        },
        {
          "id": 330100,
          "name": "杭州市",
          "area": [
            "全市",
            "上城区",
            "下城区",
            "江干区",
            "拱墅区",
            "西湖区",
            "滨江区",
            "萧山区",
            "余杭区",
            "桐庐县",
            "淳安县",
            "建德市",
            "富阳区",
            "临安市"
          ],
          "city": null
        }
      ];
      this.selectTree(0, '', initList);
    },
    methods: {
      selectTree(index, name, cityList) {//省
        this.cityName = "";
        this.navId = index;
        this.cityId = 0;
        if ("北京" == name || "天津" == name || "上海" == name || "重庆" == name) {
          this.showData = 2;
          this.townList = cityList[0].area;
          this.cityName = name;
        } else if ("全国" == name || "钓鱼岛" == name) {
          this.showData = 2;
          this.townList = [];
          this.townList.push(name);
        } else {
          this.showData = 1;
          this.townList = cityList[0].area;
          this.cityList = cityList;
          this.cityName = cityList[0].name;
        }
      },
      selectCity(index, townList, name) {//市
        this.cityId = index;
        this.townList = townList;
        this.cityName = name;
      },
      selectTown(text) {//县
        this.$router.push({
          path: "/recommendPeople",
          query: {
            "city": text == '全市' ? this.cityName : text,
            "userId": this.userId,
            "inviteType": this.inviteType,
            "affiliationId": this.affiliationId
          }
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  .work-address-tree
    display: flex
    wh(100%, 100%)
    size-color(0.4rem, rgba(51, 51, 51, 1))
    background: #f5f5f5
    .address-tree-nav
      wh(3.2rem, auto)
      overflow-y: scroll
      .address-tree-ellipsis
        display: flex
        align-items: center
        padding-left: 0.427rem
        margin-bottom: 0.027rem
        wh(3.2rem, 1.2rem)
        background: rgba(224, 224, 224, 1)
      .nav-active
        background: #EBEBEB
      .nav-second-active
        background: #FFF
    .address-tree-content-city
      wh(3.2rem, auto)
      overflow-y: scroll
      .address-tree-ellipsis-content
        display: flex
        align-items: center
        padding-left: 0.427rem
        margin-bottom: 0.027rem
        wh(3.2rem, 1.2rem)
        background: rgba(235, 235, 235, 1)
      .city-active
        background: #FFFFFF
    .address-tree-content-town
      wh(3.6rem, auto)
      overflow-y: scroll
      .address-tree-ellipsis-content
        display: flex
        align-items: center
        padding-left: 0.427rem
        margin-bottom: 0.027rem
        wh(100%, 1.2rem)
        background: #FFFFFF
      .address-tree-ellipsis-active
        background: rgba(255, 255, 255, 1)
    .town-con
      width: 6.8rem
</style>
